<template>
  <div id="integralRole">
    <h1 class="con-right-title">
      基础规则
    </h1>
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        :rules="rules"
        label-width="160px"
      >
        <el-form-item
          label="用户积分过期设置"
          prop="integralExpirationTime"
          class="small"
        >
          积分有效期
          <el-select
            class="short-input"
            v-model="ruleForm.integralExpirationTime"
            placeholder="请选择有效期"
          >
            <el-option
              v-for="item in validityList"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="integralExpirationTime-span">
          （在配置的相应有效期当月月末最后一天23:59:59过期）
        </div>
        <el-form-item
          label="用户积分数量设置"
          prop="integralGetMax"
          class="small"
        >
          积分获取上限
          <el-input-number
            v-model.number="ruleForm.integralGetMax"
            size="mini"
            :min="0"
            :max="99999999"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number>
          分
        </el-form-item>
      </el-form>
      <div class="tips-box">
        注意：规则保存后，将于次日零点生效！
      </div>
      <el-button
        type="success"
        :loading="loading"
        @click="confirmLabel('ruleForm')"
        >保存</el-button
      >
    </div>
    <h1 class="con-right-title">
      鲜花积分兑换比例设置
    </h1>
    <div class="form-box form-box-flower">
      <el-form ref="flowerForm" :model="flowerForm" label-width="160px">
        <el-form-item
          label="一朵鲜花兑换"
          prop="integralNum"
          :rules="{
            required: true,
            message: '请输入兑换积分数',
            trigger: 'change',
            type: 'number'
          }"
          class="small form-box-flower_item"
        >
          <el-input-number
            v-model.number="flowerForm.integralNum"
            size="small"
            :min="1"
            :controls="false"
            :step="1"
            step-strictly
          ></el-input-number>
          个积分
        </el-form-item>
      </el-form>
      <div class="form-box__btn">
        <el-button
          type="success"
          :loading="flowerloading"
          @click="preservation('flowerForm')"
          >保存</el-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import {
  getRule,
  editRule,
  editFlowerRule
} from '@/api/couponsIntegral/integralRole' //接口
export default {
  name: 'integralRole',
  msg: '用户成长体系-积分设置-积分规则',
  data() {
    return {
      loading: false,
      flowerloading: false, //鲜花兑换积分保存
      timespan: false, //设置积分有效期当月过期提醒
      validityList: [], //积分有效期
      ruleForm: {
        integralExpirationTime: '',
        integralGetMax: undefined // 积分获取上限
      },
      flowerForm: {
        integralNum: 0 //一朵鲜花兑换积分数
      },
      rules: {
        integralExpirationTime: {
          required: true,
          message: '请选择积分有效期',
          trigger: 'blur'
        },
        integralGetMax: {
          required: true,
          message: '请输入积分获取上限',
          trigger: 'change',
          type: 'number'
        }
      }
    }
  },
  mounted() {
    this.getStatusList()
  },
  watch: {
    'ruleForm.integralExpirationTime': {
      handler(newVal, oldVal) {
        if (newVal === '180' || newVal === '365' || newVal === '730') {
          this.timespan = true
        } else {
          this.timespan = false
        }
      },
      deep: true
    }
  },
  methods: {
    async getStatusList() {
      // 设置积分有效期转换为月数
      this.validityList = await sysNormalDisable(
        'Integral_rule_expiration_days'
      )
      // 设置积分有效期默认选择六个月
      this.ruleForm.integralExpirationTime = this.validityList[0].dictValue
      this.getFormData()
    },
    getFormData() {
      getRule(
        (response) => {
          let {
            integralExpirationTime,
            integralGetMax,
            subscriptionRatio
          } = response
          //用户积分过期时间和用户积分数量设置数据回显
          this.ruleForm = {
            integralExpirationTime: integralExpirationTime.toString(),
            integralGetMax
          }
          //鲜花兑换积分比例回显
          this.flowerForm = {
            integralNum: subscriptionRatio
          }
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },
    /* 基础规则确认提交 */
    confirmLabel(formName) {
      /* let _this = this*/
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let obj = { ...this.ruleForm }
          editRule(
            obj,
            (response) => {
              this.$message.success('操作成功！')
              this.getFormData()
            },
            (response) => {
              this.loading = false
              this.$message.warning('编辑失败，' + response.message)
            }
          )
        } else {
          return false
        }
      })
    },
    /*鲜花积分兑换比例设置保存方法,鲜花积分兑换比例设置即时生效*/
    preservation(flowerForm) {
      /* let _this = this*/
      this.$refs[flowerForm].validate((valid) => {
        if (valid) {
          this.flowerloading = true
          let obj = { ...this.flowerForm }
          //  鲜花兑换保存接口
          editFlowerRule(
            obj,
            (response) => {
              this.flowerloading = false
              this.$message.success('操作成功！')
              this.getFormData()
            },
            (response) => {
              this.flowerloading = false
              this.$message.warning('编辑失败，' + response.message)
            }
          )
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
#integralRole {
  .form-box {
    width: 500px;
    .el-select {
      width: auto;
    }
  }
  .short-input {
    .el-input__inner {
      width: 90px !important;
    }
  }
  .small {
    .el-input-number--mini {
      width: 70px;
      margin: 0 5px;
      .el-input__inner {
        padding-left: 5px;
        padding-right: 5px !important;
      }
    }
  }
  .el-button {
    margin: 20px 100px;
    padding: 5px 30px !important;
  }
  .tips-box {
    padding-left: 35px;
    color: #f00;
    font-weight: bold;
    font-size: 16px;
  }
  .form-box-flower_item {
    // deep深度作用选择器，覆盖原生的样式作用域
    :deep(.el-form-item__label) {
      width: 145px !important;
      padding: 0 25px 0 0 !important;
    }
    :deep(.el-input-number--small) {
      margin-left: -30px;
    }
    .el-form-item__content {
      margin-left: 110px !important;
    }
  }
  .integralExpirationTime-span {
    margin-left: 50px;
    margin-top: -10px;
    color: red;
  }
}
</style>
